<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" http-equiv="refresh">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>智能化安全管控平台</title>
		<link rel="icon" href="admin/images/favicon.ico">
		<link rel="shortcut icon" href="admin/images/favicon.ico" type="image/x-icon" />
		<!-- 依 赖 样 式 -->
		<link rel="stylesheet" href="component/pear/css/pear.css" />
		<!-- 加 载 样 式 -->
		<link rel="stylesheet" href="admin/css/loader.css" />
		<!-- 布 局 样 式 -->
		<link rel="stylesheet" href="admin/css/admin.css" />
		<style>
			.user i{
				background: url("${ctxPath}/resource/index/user.png") no-repeat;
				height: 35px;
				width: 35px;
				display: inline-block;
				background-size: 100%;
				vertical-align: middle;
			}
			.logout i{
				background: url("${ctxPath}/resource/index/logout.png") no-repeat;
				height: 15px;
				width: 15px;
				display: inline-block;
				background-size: 100%;
				vertical-align: middle;
			}
		</style>
	</head>
	<!-- 结 构 代 码 -->
	<body class="layui-layout-body pear-admin">
		<!-- 布 局 框 架 -->
		<div class="layui-layout layui-layout-admin">
			<!-- 顶 部 样 式 -->
			<div class="layui-header">
				<!-- 菜 单 顶 部 -->
				<div class="layui-logo">
					<!-- 图 标 -->
					<img class="logo"></img>
					<!-- 标 题 -->
					<span class="title"></span>
				</div>
				<!-- 多 系 统 菜 单 -->
				<div id="control" class="layui-layout-control">

				</div>
				<!-- 顶 部 右 侧 菜 单 -->
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item user">
						<!-- 头 像 -->
						<a href="javascript:;" class="layui-icon user">
							<i class="icon"></i>
							<span>${user.username!}</span>
						</a>
						<!-- 功 能 菜 单 -->
						<dl class="layui-nav-child">
							<dd style="background-color: #F6F6F6"><a href="javascript:void(0);" class="updpwd">修改密码</a></dd>
<!--							<dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>-->
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:void(0);" class="layui-icon logout" id="logout">
							<i class="icon"></i>
							<span>注销</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 侧 边 区 域 -->
			<div class="layui-side layui-bg-black">
				<!-- 菜 单 顶 部 -->
				<div class="layui-logo">
					<!-- 图 标 -->
					<img class="logo"></img>
					<!-- 标 题 -->
					<span class="title"></span>
				</div>
				<!-- 菜 单 内 容 -->
				<div class="layui-side-scroll">
					<div id="sideMenu" style="padding-top: 8px;"></div>
				</div>
			</div>
			<!-- 视 图 页 面 -->
			<div class="layui-body">
				<!-- 内 容 页 面 -->
				<div id="content"></div>
			</div>
			<!-- 遮 盖 层 -->
			<div class="pear-cover"></div>
			<!-- 加 载 动 画 -->
			<div class="loader-main">
				<!-- 动 画 对 象 -->
				<div class="loader"></div>
			</div>
		</div>
		<!-- 移 动 端 便 捷 操 作 -->
		<div class="pear-collasped-pe collaspe">
			<a href="#" class="layui-icon layui-icon-shrink-right"></a>
		</div>
		<div style="display: none">
			<audio id="msgtz" autoplay="false">
				<source src="" type="audio/mp3">
			</audio>
		</div>
		<!-- 依 赖 脚 本 -->
		<script src="component/layui/layui.js"></script>
		<script src="component/pear/pear.js"></script>
		<!-- 框 架 初 始 化 -->
		<script>
			layui.use(['admin','jquery','popup','ws','toast'], function() {
				var $ = layui.jquery;
				var admin = layui.admin;
				var popup = layui.popup;
				let toast = layui.toast;

				admin.setConfigType("yml");
				admin.setConfigPath("config/pear.config.yml");
				admin.render();

				// 登出逻辑
                $(document).on("click", "#logout", function() {
                    location.href="${ctxPath}/login";
                });
                $(document).on("click", ".updpwd", function() {
					var audio=document.getElementById("msgtz");
                    layer.open({
                        type: 2,
                        title: '修改密码',
                        shade: 0.1,
                        area: ['400px','300px'],
                        content: '${ctxPath}/pwd'
                    });
                });

				$(document).on("click", ".wzts", function() {
					$('*[user-menu-id="1"]').trigger("click");
				});

				// 初始化消息回调
				admin.message();

				let ws = layui.ws;
				let baseUrl = (window.document.location.href).substring(7, (window.document.location.href).indexOf(window.document.location.pathname));
				let audio=document.getElementById("msgtz");
				audio.addEventListener('ended', function () {
					audio.pause();
				}, false);
				let ws_ = ws.config({
					url: "ws://"+baseUrl+"/ws/msgServ",
					onopen: function () {

					},
					onclose: function () {

					},
					onmessage: function (msg, userid, get_data) {
						let title = (get_data.title)||"系统消息";
						let type = (get_data.type)||4;
						let position = (get_data.position)||'topRight';
						switch (type) {
							case 1:
								toast.success({title: title,message: msg,position: position});
								break;
							case 2:
								toast.error({title: title,message: msg,position: position});
								break;
							case 3:
								if (get_data.title=="违章推送"){
									audio.src="${ctxPath}/admin/video/alarm.mp3";
									audio.play();
									toast.warning({title: title,message: msg,position: position,timeout: 10000,class: 'wzts',closeOnClick: true});
								}else{
									toast.warning({title: title,message: msg,position: position,timeout: 10000,closeOnClick: true});
								}
								break;
							default:
								toast.info({title: title,message: msg,position: position});
								break;
						}

					},
				});
			})
		</script>
	</body>
</html>
